<template>
	<view class="page">
		<view class="remen-class-list" @click="toDetail(item)" v-for="(item, index) in videosList" :key="item.id">
			<image :src="item.cover_image" mode="aspectFill"></image>
			<view class="remen-play">
				<view class="remen-play-left">
					<u-icon name="play-circle-fill" color="#fe466b" size="50"></u-icon>
					<text class="text u-line-1">{{item.name}}</text>
				</view>
				<!-- <view class="time">5:32</view> -->
			</view>
			<view class="icon-eyes">
				<u-icon class='icon' name="eye"></u-icon><text
					style="margin-left: 10rpx;">{{item.reading_volume}}</text>
			</view>
			<view class="icon-calendar">
				<u-icon class='icon' name="calendar"></u-icon><text
					style="margin-left: 10rpx;">{{item.createtime | date('yyyy-mm-dd')}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				require: true,
				type: Array,
				default: []
			},
			pageType: {
				require: false,
			}
		},
		data() {
			return {
				videosList: [],
				baseUrl: this.$u.http.config.baseUrl,
			}
		},
		onLoad() {

		},
		watch: {
			dataList(newVal) {
				this.videosList = newVal
			}
		},
		methods: {
			routeMethods(item) {
				let token = uni.getStorageSync('token')
				if (token) {
					if (item.type == 0) {
						this.$u.route('/packageB/pages/hostpotDetail/hostpotDetail', {
							id: item.id,
							title: item.name,
							pageType: this.pageType
						})
					} else {
						this.$u.route('/packageB/pages/videosDetail/videosDetail', {
							id: item.id,
							title: item.name,
							pageType: this.pageType
						})
					}
				}else{
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
			toDetail(item) {
				let token = uni.getStorageSync('token')
				if (this.pageType == 'liveBack') {
					if (token) {
						let vip = uni.getStorageSync('userinfo').vip
						if (vip) {
							this.routeMethods(item)
						} else {
							uni.showToast({
								title: '仅限会员观看',
								duration: 1000,
								icon: 'error',
							})
						}
					} else {
						uni.showToast({
							title: '请登录后操作',
							duration: 1000,
							icon: 'error',
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my',
							})
						}, 1000)
					}

				} else {
					this.routeMethods(item)
				}



			}
		}
	}
</script>

<style lang="scss">
	.remen-class-list {
		border-radius: 50rpx;
		min-height: 250rpx;
		width: 100%;
		margin-bottom: 20rpx;
		position: relative;

		image {
			border-radius: 50rpx;
			min-height: 300rpx;
			width: 100%;
		}

		.icon-eyes {
			font-size: 24rpx;
			position: absolute;
			min-width: 100rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			right: 40rpx;
			top: 20rpx;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.icon-calendar {
			font-size: 24rpx;
			position: absolute;
			width: 200rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			left: 40rpx;
			top: 20rpx;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.remen-play {
			background-color: rgba(255, 255, 255, 0.8);
			width: 90%;
			height: 90rpx;
			position: absolute;
			bottom: 40rpx;
			left: 5%;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;

			.remen-play-left {
				margin-left: 0rpx;
				display: flex;
				justify-content: center;

				.text {
					margin-left: 10rpx;
					font-weight: 600;
					width: 490rpx;
				}

			}

			.time {
				// float: right;
				color: #fe466b
			}
		}
	}
</style>
